Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / PromptDialog.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<Transition Te6edf3name=Ta5d6ff"prompt-dialog"Tff7b72>

Tff7b72<div Te6edf3v-if=Ta5d6ff"pendingPrompt" Te6edf3class=Ta5d6ff"fixed inset-0 z-9999 flex items-center justify-center p-4"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"fixed inset-0 bg-black/50 backdrop-blur-xs shadow-2xl" @Te6edf3click=Ta5d6ff"cancel"Tff7b72>Tff7b72</div>

Tff7b72<div

Te6edf3class=Ta5d6ff"relative w-full sm:w-auto sm:min-w-[400px] sm:max-w-md bg-white dark:bg-zinc-900 sm:rounded-3xl rounded-3xl shadow-2xl border border-gray-200 dark:border-zinc-800 overflow-hidden transform transition-all"

@click.stop

Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"p-8"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-start mb-6"Tff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"shrink-0 flex items-center justify-center w-12 h-12 rounded-2xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 mr-4"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"form-textbox" Te6edf3class=Ta5d6ff"w-6 h-6" Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"flex-1 min-w-0"Tff7b72>

Tff7b72<h3 Te6edf3class=Ta5d6ff"text-xl font-black text-gray-900 dark:text-white mb-2"Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"common.prompt_title"Tff7b72) Tff7b72}}

Tff7b72</h3>

Tff7b72<p Te6edf3class=Ta5d6ff"text-gray-600 dark:text-zinc-300 whitespace-pre-wrap leading-relaxed"Tff7b72>

Tff7b72{{ Te6edf3pendingPromptTe6edf3.message Tff7b72}}

Tff7b72</p>

Tff7b72</div>

Tff7b72</div>

Tff7b72<input

Te6edf3ref=Ta5d6ff"promptInput"

Te6edf3v-model=Ta5d6ff"inputValue"

Te6edf3:type=Ta5d6ff"inputType"

Te6edf3class=Ta5d6ff"w-full px-4 py-3 rounded-xl border border-gray-200 dark:border-zinc-700 bg-gray-50 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 text-sm focus:outline-hidden focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500"

Te6edf3autocomplete=Ta5d6ff"off"

@Te6edf3keydown.enter.prevent=Ta5d6ff"confirm"

@Te6edf3keydown.esc.prevent=Ta5d6ff"cancel"

Tff7b72/>

Tff7b72<div Te6edf3class=Ta5d6ff"flex flex-col sm:flex-row gap-3 sm:justify-end mt-8"Tff7b72>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"px-6 py-3 text-sm font-bold text-gray-700 dark:text-zinc-300 bg-gray-100 dark:bg-zinc-800 rounded-xl hover:bg-gray-200 dark:hover:bg-zinc-700 transition-all active:scale-95"

@Te6edf3click=Ta5d6ff"cancel"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"common.cancel"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72<button

Te6edf3type=Ta5d6ff"button"

Te6edf3class=Ta5d6ff"px-6 py-3 text-sm font-bold text-white bg-blue-600 hover:bg-blue-700 rounded-xl shadow-lg shadow-blue-600/20 transition-all active:scale-95"

@Te6edf3click=Ta5d6ff"confirm"

Tff7b72>

Tff7b72{{ $Te6edf3tTff7b72(Ta5d6ff"common.ok"Tff7b72) Tff7b72}}

Tff7b72</button>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</div>

Tff7b72</Transition>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import GlobalEmitter from "../js/GlobalEmitter";

import MaterialDesignIcon from "./MaterialDesignIcon.vue";

export default {

name: "PromptDialog",

components: {

MaterialDesignIcon,

},

data() {

return {

pendingPrompt: null,

resolvePromise: null,

inputValue: "",

inputType: "text",

};

},

mounted() {

GlobalEmitter.on("prompt", this.show);

},

beforeUnmount() {

GlobalEmitter.off("prompt", this.show);

},

methods: {

show({ message, defaultValue, resolve, inputType }) {

if (typeof this.resolvePromise === "function") {

this.resolvePromise(null);

}

this.pendingPrompt = { message };

this.inputValue = defaultValue == null ? "" : String(defaultValue);

this.inputType = inputType === "password" ? "password" : "text";

this.resolvePromise = resolve;

this.$nextTick(() => {

const input = this.$refs.promptInput;

if (input && typeof input.focus === "function") {

input.focus();

input.select();

}

});

},

confirm() {

if (this.resolvePromise) {

this.resolvePromise(this.inputValue);

this.resolvePromise = null;

}

this.pendingPrompt = null;

this.inputValue = "";

this.inputType = "text";

},

cancel() {

if (this.resolvePromise) {

this.resolvePromise(null);

this.resolvePromise = null;

}

this.pendingPrompt = null;

this.inputValue = "";

this.inputType = "text";

},

},

};

Tff7b72</script>

Tff7b72<style scopedTff7b72>

.prompt-dialog-enter-active,

.prompt-dialog-leave-active {

transition: all 0.2s ease;

}

.prompt-dialog-enter-from,

.prompt-dialog-leave-to {

opacity: 0;

}

.prompt-dialog-enter-from .relative,

.prompt-dialog-leave-to .relative {

transform: scale(0.95);

opacity: 0;

}

Tff7b72</style>